<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<!--控制条块状黑色-->
		<meta content="telephone=no" name="format-detection" />
		<!--禁止数字转拨号-->
		<link href="../../css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/second.css" />
		<script src="../../js/jquery-1.11.3.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
		<!--百度地图-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nxW0akynjKF8Ag0G0uVVwq0t6ak1Q1Zj"></script>
	</head>

	<body>
		<!--顶部nav-->
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<!--<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
		<span class="mui-icon mui-icon-left-nav" ></span>
	</button>-->
			<!--返回-->
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-center mui-title">查看维保项</h1>
		</div>
		<!--内容区-->
		<div class="mui-content" id="app">
			<!--查看维保项-->
			<div class="repair-item" style="display: block;">
				<div class="repair-item-head">
					<h1>
						<b>{{list.length | typeFormat}}</b>维保<span class="mui-pull-right total"> <u>{{totalNum}}</u> 项</span>
					</h1>
					<div v-for="(v,i) in notPassList">
						<h2>
							{{v.chkitem}}<span class="mui-pull-right">{{v | statusFormat('name')}}</span>
						</h2>
						<p>
							 反馈意见：{{v.reason}}
						</p>
					</div>
				</div>
				<ul class="repair-item-list mui-list-unstyled">
					<li v-for="(item,index) in list" :key="index">
						<h2>{{item.jhtype | typeFormat}}维保项<span class="mui-pull-right">{{item.item.length}}项</span></h2>
						<div class="mui-table" v-for="(v,i) in item.item" :key="i">
							<div class="mui-table-cell mui-text-left">
								<p>
									<b>{{i+1}}</b> {{v.chkitem}}
								</p>
							</div>
							<div class="mui-table-cell mui-text-right">
								<span :class="v | statusFormat('class')" >{{v | statusFormat('name')}}</span>								
							</div>
						</div>
					</li>
				</ul>
			</div>
			
		</div>
	</body>
</html>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.view.js"></script>
<script src="../../js/main.js"></script>
<script src="../../js/loading.js"></script>
<script src="../../libs/mustache.min.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			userid: "",
			token: "",
			caseid: localStorage.getItem('caseid'),
			opinionShow: false,
			opinionObj: "",
			list: [],
// 			status: { //维保状态 可能做筛选
// 				"1": {
// 					"name": "通过",
// 					"class": "vd"
// 				},
// 				"2": {
// 					"name": "未通过",
// 					"class": "on"
// 				},
// 				"3": {
// 					"name": "无此项",
// 					"class": "on"
// 				}
// 			}
		},
		methods: {
			getList: function() {
				axios({
						url: domain + "/dtwbgl/wbprocessitem.h5",
						method: 'post',
						data: {
							caseid: this.caseid,
							// cmd: '10027',
							userid: this.userid,
							token: this.token,
						},
						transformRequest: [function(data) {
							let ret = ''
							for (let it in data) {
								ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
							}
							return ret
						}],
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}

					})
					.then(response => {
						var res = response.data;
						if (res.code == 2001) {
							this.list = res.data;
							mui.hideLoading();
						} else {
							mui.toast(res.msg);
							mui.openWindow({
								url: '../../login.html',
								id: '../../login.html'
							})


						}
					})
					.catch(error => {
						console.log(error)
						mui.toast(res.msg);
						mui.openWindow({
							url: '../../login.html',
							id: '../../login.html'
						})
						this.errored = true
					})
			},
		},
		created: function() {
			let userid = localStorage.getItem('userid');
			let token = localStorage.getItem('token');

			if (!userid || !token) {
				mui.toast("请先登陆");
				setTimeout(function() {
					// 跳转登陆页面
				});
				return false;
			}
			this.userid = userid;
			this.token = token;

			mui.showLoading("正在加载..", "#app");
			let wblist = localStorage.getItem(this.caseid + "_wblist");
			if (wblist) {
				this.list = JSON.parse(wblist);
				mui.hideLoading();
			} else {
				this.getList();
			}
			
		},
		mounted() {

		},
		filters: {
			typeFormat: function(num) {
				// let num = item.jhtype;
				let type_text = {
					"1": {
						"name": "半月",
						"class": "half"
					},
					"2": {
						"name": "季度",
						"class": "quarter",
					},
					"3": {
						"name": "半年",
						"class": "half_year"
					},
					"4": {
						"name": "年度",
						"class": "year"
					}
				};
				
				return type_text[num] !== undefined ? type_text[num].name :'';
			},
			statusFormat: function(v,arg1) {
				let state = v.ifok;
				var status = { //维保状态 可能做筛选
					"1": {
						"name": "通过",
						"class": ""
					},
					"2": {
						"name": "未通过",
						"class": "on"
					},
					"3": {
						"name": "无此项",
						"class": "on"
					}
				};
				// let status = this.status;
				return status[state] !== undefined ? status[state][arg1] : '';				
			}
		},
		computed: {
			totalNum: function() {
				let total = 0;
				this.list.forEach(function(value, index) {
					total += value.item.length;
				});
				return total;
			},
			notPassList: function(){
				let data = [];
				this.list.forEach(function(value, index){
					// console.log(value.item.length);
					value.item.forEach(function(v,i){
						if(v.ifok == 2){
							data.push(v);
						}
					});
					
				});
				return data;
			}
		}
	});
</script>
